<template>
  <div>
    <div class="header">
      <div class="logo">中商惠民——CMS管理系统</div>
      <el-select v-model="selRole" placeholder="" class="changePost" @change="handleChangePost">
        <el-option v-for="(item, index) in infos" :label="item.branchName + '：' +item.parOrgName + '：' +item.role_name" :value="index" :key="index"></el-option>
      </el-select>
      <span class="userInfo"><b>{{userName}}</b>欢迎您！</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      userName: '',
      infos: '',
      index: ''
    },
    data () {
      return {
        selRole: this.index
      }
    },
    methods: {
      handleChangePost (val) {
        console.log(val)
        console.log(this.infos[val])
        var postInfo = {
          // branchId: this.infos[val].branchId,
          // roleid: this.infos[val].roleid,
          orId: this.infos[val].or_id,
          index: val,
          userId: this.infos[val].user_id
        }
        window.localStorage.setItem('postInfo', JSON.stringify(postInfo))
        this.$store.dispatch('resetTab', 'reset')
        this.$store.dispatch('selMenu', '')
        this.$store.dispatch('setPostState', this.$store.state.updateState.setPostState + 1)
        // window.location.replace('http://localhost:3000/home/20515')
      }
    },
    created () {
      var postInfo = JSON.parse(window.localStorage.getItem('postInfo'))
      if (postInfo) {
        this.selRole = postInfo.index
      }
    },
    watch: {
      index (curVal, oldVal) {  // 监听 更新状态 查询list
        this.selRole = curVal
      }
    }
    // watch
  }
</script>
<style>
  .header {
    background: #575556;
    height:50px;
    width: 100%;
  }
  .logo{
    background: url(../assets/logo_.png) no-repeat 15px 10px;
    line-height:52px;
    font-family: "Arial","Microsoft YaHei";
    font-size: 24px;
    color:#fff;
    text-indent:55px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .changePost{
    float: right;
    margin-right: 20px;
    margin-top: 12px;
    width:360px;
    height: 30px;
  }
  .changePost .el-input__inner {
    height: auto;
    line-height: 30px
  }
  .userInfo {
    line-height:52px;
    font-size:14px;
    float:right;
    margin-right:10px;
    color:#fff;
  }
  .userInfo b{
    margin-right:10px;
    color:#fff;
  }
  @media screen and (max-width: 760px) {
   .header{
     height: 70px;
   }
   .changePost{
     width: 200px;
   }
  }
</style>
